<template>
    <div>
        <el-form :model="userFormData" inline ref="userFormDataRef" label-width="120" :rules="rules">
				<el-row>
				  <el-col :span="24">
					<el-form-item label="规格名称" prop="ruleName">
						<el-input v-model="userFormData.ruleName" placeholder="填写规格名称" style="width: 100%;"></el-input>
					</el-form-item>
				  </el-col>

				</el-row>

				<el-row v-for="(item,index) in ruleValue" :key="index">
					<div v-if="item.editFlag" style="display: flex;">
						<el-col :span="10">
                        <el-form-item label="规格">
                            <el-input style="width: 150px;" v-model="item.value" placeholder="规格"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="规格值">
                            <el-input style="width: 150px;" v-model="item.detail" placeholder="规格值"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-button type="primary" @click="setItemRule(index,item)">确定</el-button>
                        <el-button >取消</el-button>
                    </el-col>
					</div>
          <div v-else style="display: flex;">
						<el-form-item label=" ">
							<el-row>
								<el-col :span="24">
									<el-text>
										{{ item.value }}
										<el-icon>
											<CircleClose />
										</el-icon>

									</el-text>
								</el-col>
								<el-col :span="24">

									<el-tag v-for="tag in item.detail" @close="handleTagClose(tag,item)" :key="tag" closable
									:type="tag.type" style="margin-right: 5px;">
										{{ tag }}
									</el-tag>
									<el-input v-model="item.addDetail" style="width: 50px;" v-if="item.addFlag" placeholder="" @blur="saveDetail(item)"></el-input>
									<el-button v-else icon="Plus" size="mini" style="margin-left: 5px;" @click="addDetail(item)">添加</el-button>
								</el-col>
							</el-row>
						</el-form-item>
					</div>
        </el-row>
				<el-row>
				  <el-col :span="24">
					<el-button type="primary" @click="addRuleValue" v-if="isShow">添加新规格</el-button>
				  </el-col>
				</el-row>
			</el-form>
    </div>
</template>

<script setup lang="ts" name="rule">
import { defineAsyncComponent, reactive, ref, onMounted } from 'vue';
import { ElMessageBox ,ElMessage  } from 'element-plus';
import {rulePageList, addOrUpdateRule} from '@/api/goods/goodsRule'
import { cloneDeep } from 'lodash';

// 定义变量内容
const passwordFormData = ref({
	id:null,
	newPassWord:null
})

const userFormDataRef=ref(null)
const ruleValue = ref([] as any[])
const isShow = ref(true)


const userFormData = ref({
	id:null,
  ruleName:null,
  ruleValue:[]
})


const rules = ref({
  ruleName: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  passWord: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ]
})

const emit = defineEmits(['updateValue']);

//点击子组件按钮将数据传递到子组件
function saveFormData(){
  userFormData.value.ruleValue = JSON.stringify(ruleValue.value)
  emit("updateValue",userFormData)
}


//删除tag
function handleTagClose(tag:any,item:any){
	item.detail = item.detail.filter(obj => obj !== tag)
	//将字符串转成json对象，JSON.stringify将对象转换成字符串
	JSON.parse(JSON.stringify(item))

}
//保存属性值
function saveDetail(item : any){
	item.detail.push(item.addDetail)
	item.addFlag = false
  saveFormData()
}

//打开添加属性值文本框
function addDetail(item : any){
	item.addFlag = true
}

//点击确定时将填写的数据替换到rulevalue数组中
function setItemRule(index :any,item:any){
	item.editFlag = false
	item.detail=[item.detail]
	ruleValue.value.splice(index,1,item)
	isShow.value=true
  saveFormData()
}

//添加规格值
function addRuleValue(){
    ruleValue.value.push({ value:null, detail:[], editFlag:true})
    isShow.value=false
}







function resertFrom(){
	Object.assign(userFormData, {
		id:null,
		ruleName:null,
		ruleValue:null
	});
}



</script>
